<template>
  <div class="home">
    <div class="container">
      <img ref="bkImage" class="bkg" src="../assets/home.jpg" alt="" />
      <div class="scene_btn scene_1" @click="showScene(1)">
        <img id="btn_1" src="../assets/select.png" alt="" />
        <img
          v-if="state[0] === 1"
          class="resolve"
          src="../assets/resolve.png"
          alt=""
        />
      </div>
      <div class="scene_btn scene_2" @click="showScene(2)">
        <img id="btn_2" src="../assets/select.png" alt="" />
        <img
          v-if="state[1] === 1"
          class="resolve"
          src="../assets/resolve.png"
          alt=""
        />
      </div>
      <div class="scene_btn scene_3" @click="showScene(3)">
        <img id="btn_3" src="../assets/select.png" alt="" />
        <img
          v-if="state[2] === 1"
          class="resolve"
          src="../assets/resolve.png"
          alt=""
        />
      </div>
      <div class="scene_btn scene_4" @click="showScene(4)">
        <img id="btn_4" src="../assets/select.png" alt="" />
        <img
          v-if="state[3] === 1"
          class="resolve"
          src="../assets/resolve.png"
          alt=""
        />
      </div>
      <div class="scene_btn scene_5" @click="showScene(5)">
        <img id="btn_5" src="../assets/select.png" alt="" />
        <img
          v-if="state[4] === 1"
          class="resolve resolve5"
          src="../assets/resolve.png"
          alt=""
        />
      </div>
      <div class="scene_btn share" @click="sharePage">
        <img id="share" src="../assets/share_2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import router from "../router/index";
import { clickAnimation } from "../utils/animation";
import { wechatShare } from "../utils/utils";

const state = ref();

const showScene = (num: number) => {
  clickAnimation(`btn_${num}`, 200, () => {
    router.push("/scene_" + num);
  });
};
const sharePage = () => {
  clickAnimation("share", 200, async () => {
    wechatShare();
  });
};

onBeforeMount(() => {
  const complete = sessionStorage.getItem("complete");
  if (complete) {
    state.value = JSON.parse(complete);
  } else {
    state.value = [0, 0, 0, 0, 0];
    sessionStorage.setItem("complete", JSON.stringify(state.value));
  }
});
</script>

<style lang="scss">
.home {
  height: 100%;
  .container {
    height: 100%;
    position: relative;
    .scene_btn {
      position: absolute;
      > img {
        width: 10rem;
      }
      .resolve {
        width: 4rem;
        position: absolute;
        top: 3.2rem;
        right: -1.6rem;
      }
      .resolve5 {
        top: 4.4rem;
      }
    }
    .scene_1 {
      top: 12%;
      left: 11%;
      transform: rotate(-6deg);
    }
    .scene_2 {
      top: 12%;
      right: 7%;
      transform: rotate(8deg);
    }
    .scene_3 {
      top: 36%;
      left: 8%;
      transform: rotate(-10deg);
    }
    .scene_4 {
      top: 36%;
      right: 11%;
      transform: rotate(10deg);
    }
    .scene_5 {
      top: 54%;
      left: 50%;
      transform: translateX(-50%);
      > img {
        width: 12rem;
      }
    }
    .share {
      bottom: 0.5rem;
      right: 0.5rem;
    }
  }
}
</style>
